<template>
  <div class="position-absolute container-fluid zindex top-20">
        <el-row>
            <el-col :xs="1" :sm="6" :md="8" :lg="8">
            </el-col>
            <el-col :xs="22" :sm="12" :md="8" :lg="8">
                <div class="bg-body mt-5 p-5 pb-1 text-center">
                    <div class="logo mb-3">
                        <img src="../../assets/img/logo.png" alt=""/>
                    </div>
                    <!-- rules和model必须,ref 为后面提交时验证需要。 且input v-model必须为【model.prop】 -->
                    <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
                        <el-form-item prop="name">
                            <el-input v-model="ruleForm.name" placeholder="用户名" :prefix-icon="User"/>
                        </el-form-item>
                        <el-form-item prop="pwd">
                            <el-input v-model="ruleForm.pwd" placeholder="密   码" :prefix-icon="Lock" show-password/>
                        </el-form-item>
                        <div class="mt-4 mb-3">
                            <el-button type="success" @click="submitForm('ruleForm')" class="w-100">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
                        </div>
                    </el-form>
                    <div class="d-flex justify-content-end">
                        <el-button type="text" class="ea-btn-text" >忘记密码</el-button>
                        <router-link to="/auth/register" class="text-decoration-none">
                            <el-button type="text"  class="ea-btn-text" >&nbsp;&nbsp;&nbsp;注册</el-button>
                        </router-link>
                    </div>
                </div>
            </el-col>
            <el-col :xs="1" :sm="6" :md="8" :lg="8">
            </el-col>
        </el-row>
    </div>



</template>

<script>
    import {Lock, User} from '@element-plus/icons-vue'
    import {login} from '../../api/apiRequest'
    import md5 from 'js-md5';                               //npm install js-md5 --save

    export default {
        setup() {
            return {
                User, Lock
            }
        },
        data() {
            return {
                ruleForm: {
                    name: '',
                    pwd: '',
                },
                rules: {
                    name: [
                        {
                            min: 2,
                            max: 12,
                            message: '用户名必须为2-12个字符',
                            trigger: 'blur',
                        },
                        {
                            required: true,
                            message: '用户名必须填写',
                            trigger: 'blur',
                        },
                    ],
                    pwd: [
                        {
                            min: 6,
                            max: 18,
                            message: '密码必须为6-18个字符',
                            trigger: 'blur',
                        },
                        {
                            required: true,
                            message: '密码必须填写',
                            trigger: 'blur',
                        },
                    ]
                },
            }
        },
        methods: {
            async getUserinfo(params) {
                let userinfo = await login(params);
                console.log(userinfo);
                localStorage.setItem('admininfo', JSON.stringify(userinfo));

                //跳转

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let password = md5(this.ruleForm.pwd);
                        this.getUserinfo({uname: this.ruleForm.name, password: password});
                    } else {
                        // msg('错误的提交','error')
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>
  .top-20{
    top: 20%;
  }
</style>